<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="text++">+</button>{{text}}
        <mydiv :text="text" @transfer="basket">
            <template #a1="{num}">
            幸运{{num}}
        </template>
        
    </mydiv>
    </div>
</body>
<script src="vue.global.js"></script>
<script>
    const {createApp,ref,computed}=Vue
    const app=createApp({
        setup(){
            let text=ref(0)
            function basket(e){
                text.value=e
            }
            return{
                text,basket
            }
        }


    })
    app.component('mydiv',{
        props:{
            text:Number
        },
        
        setup(props,{emit}){
            let options=computed(()=>{
                return props
            })
            function add(){
                let text=options.value.text
                emit('transfer',text+1)
           
            }
            return{
                options,
                emit,add
            }
        },
        template:`<div @click="add">{{text}}<slot name="a1" num="777" /></div>
        `
        

    })
    
    app.mount("#app")
</script>
</html>